@extends('admin.common.main')
@section('header')
    {{--  <link rel="stylesheet" href="/admin/js/bootstrap.min.css">--}}

    <link rel="stylesheet" href="/admin/lib/datatables/1.10.15/dataTable.css">
@endsection

@section('content')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</span> 用户管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="page-container">

        <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l">
                <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>

                <a href="{{route('admin.article.create')}}"  class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加文章</a>

                 <a href="{{route('admin.article.export')}}"  class="btn btn-warning radius"><i class="Hui-iconfont">&#xe600;</i> 文章导出</a>
            </span> <span class="r">共有数据：<strong>88</strong> 条</span> </div>
        <div class="mt-20">
            <table class="table table-border table-bordered table-hover table-bg table-sort">
                <thead>
                <tr class="text-c">
                    <th width="25"><input type="checkbox" class="checkAll" value=""></th>
                    <th width="100">id</th>
                    <th width="100">文章标题</th>
                    <th width="100">文章封面</th>
                    <th width="130">作者</th>
                    <th width="70">内容</th>

                    <th width="100">操作</th>
                </tr>
                </thead>
                <tbody>
            {{--    @foreach($data as $key=>$val)
                    <tr class="text-c">
                        <th width="25"><input type="checkbox" name="ids[]" value="{{$val['id']}}"></th>
                        <th width="100">{{$val['id']}}</th>
                        <td >{{$val['title']}}</td>

                        <td ><img src="{{$val['pic']}}" alt="" width="100" height="100"></td>
                        <td >{{$val['author']}}</td>
                        <td >{{$val['body']}}</td>


                        <td class="td-manage">
                            <a href="{{route('admin.node.edit',$val)}}"  class="label label-default radius ">修改</a>

                                    <a href="{{route('admin.node.destroy',$val)}}"  class="label label-danger radius delBtn">删除</a>
                        </td>
                    </tr>

                @endforeach--}}
                </tbody>
            </table>


        </div>
        {{--分页并保留 搜索条件--}}
        {{-- {{$data->appends(Request::all())->links()}}--}}



    </div>

@endsection


@section('js')


   <script>
       {{-- *** dataTable  前端引入 绑定的挂载点是 一个表单  按照手册正常引用 即可 --}}
       /*$(document).ready(function(){
           $('.table-sort').DataTable();
       });*/

       $(document).ready(function(){
            $('.table-sort').DataTable({
                "serverSide": true,
                "ajax": "{{route('admin.article.index')}}",
                columns: [
                    { data: '', render: function ( data, type, row ) {
                            return '<th width="25"> <input type="checkbox" value="' + row.id + '" name="ids[]"></th>';
                        } },
                    { data: 'id' },
                    { data: 'title' },
                    { data: 'pic',render: function ( data, type, row ){
                            return `<img src="${data}" alt="" width="200" height="100">`
                        } },
                    { data: 'author' },
                    { data: 'body' },
                    { data: '', render: function ( data, type, row ) {
                     return ` <a href=""  class="label label-default radius ">修改</a>

                                    <a href="javaScript:;"  class="label label-danger radius delBtn">删除</a>`+ row.id;

                      }
                    }
                ]

              });
       })



    </script>

@endsection

